<template>
  <div class="view-wrapper">
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" @click="addAccount">新增购卡活动</el-button>
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button @click="handleSuspended(scope.row)"  type="primary" v-if="scope.row.status == 1" size="small"
            >暂停</el-button
          >
          <el-button @click="handleStart(scope.row)" type="primary" v-if="scope.row.status == 2" size="small"
            >启动</el-button
          >
          <el-button @click="handleEdit(scope.row.id)" size="small"
            >修改</el-button
          >
          <el-button type="danger" @click="handleDelete(scope.row.id)" size="small"
            >删除</el-button
          >
        </template>
      </ex-table>
    </div>
    <detail-dialog
      ref="childRef"
      v-if="detailDialog"
      :id="id"
      :pathType="pathType"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components
import { allList, getDelete, deleteActivity,changeStatus } from "@/api/operateActive";
import handlePageMixin from "@/mixins/handlePageMixin";
// components
import DetailDialog from "./components//DetailDialog";
export default {
  //   name: "",
  components: {
    DetailDialog,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      detailDialog: false,
      pathType: '',
      loading: false,
      id: '',
      type: "",
      tableData: [],
      tableColumn: [
        { prop: "shopName", label: "活动店铺" },
        { prop: "cardName", label: "活动预付卡" },
        { prop: "content", label: "活动内容" },
        { prop: "buyCardAmount", label: "购卡数量" },
        { prop: "issueAmount", label: "已发FB数" },
        { prop: "freezeAmount", label: "冻结FB" },
        { prop: "statusDict", label: "活动状态" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "230",
          fixed: "right",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  computed: {},
  methods: {
    //新建子账号
    addAccount() {
      this.detailDialog = true;
      this.pathType = 'add'
    },
    getList() {
      const params = {
        ...this.pageOptions,
      };
      this.loading = true;
      allList(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    setDelete(row) {
      this.$confirm("你确定要删除" + row.shopName + "的小店吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getDelete(row.shopId)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "删除成功",
                type: 'success',
                duration: 1500,
              });
              setTimeout(()=>{
                  this.getList();
              },1000)
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },

    handleDelete(id){
      console.log("id",id)
      this.$confirm("你确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteActivity(id)
            .then((res) => {
              console.log('res',res)
              if(res.code == 200){
                this.getList()
              }
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
      
    },
    lookDetail(row) {
      this.$router.push({
        path: "/clientManagement/shopDetail",
        query: { id: id },
      });
    },
    //启动
    handleStart(row){
      var data = {
        id: row.id,
        status: row.status == 1 ? 2 : 1
      }
      changeStatus(data)
        .then((res) => {
          console.log('res',res)
          if(res.code == 200){
            this.getList()
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //暂停
    handleSuspended(row){
       var data = {
        id: row.id,
        status: row.status == 1 ? 2 : 1
      }
      changeStatus(data)
        .then((res) => {
          console.log('res',res)
          if(res.code == 200){
            this.getList()
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleEdit(id){
      this.id = id
      this.detailDialog = true;
      this.pathType = 'edit'
    },
    
    _handleSuccess(data) {
      console.log("data", data);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
</style>
